<template>
  <div>
    <div>
      <img v-if="isShowImg1" class='img' src="https://img0.baidu.com/it/u=105980894,2691582600&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" >
      <img v-show="isShowImg2" class='img'  src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Flmg.jj20.com%2Fup%2Fallimg%2F1115%2F112221112309%2F211122112309-2-1200.jpg&refer=http%3A%2F%2Flmg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1672922455&t=8bae294a0dbbc6987470d41a7195b56e" >
    </div>
    <button @click="showImg1">Show Img1</button>
    <button @click="showImg2">Show Img2</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      isShowImg1: true,
      isShowImg2: false,
    }
  },
  methods: {
    showImg1 () {
      this.isShowImg1 = !this.isShowImg1
    },
    showImg2 () {
      this.isShowImg2 = !this.isShowImg2
    }
  }
}
</script>

<style>
.img {
  width: 200px;
}
</style>
